<template>
	<div>
		<el-table :data="tableData" style="width: 100%" class="contract-table">
			<el-table-column prop="coin" label="名称">
				<template #default="scope">
					<div class="pt-10px pb-10px flex items-center">
						<img :src="scope.row.icon" alt="" class="w-[20px] h-[20px] mr-[5px]">
						<span class="text-[14px] font-[400]">{{scope.row.coin}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="wallet" label="钱包余额" />
			<el-table-column prop="unrealized" label="未实现盈亏" />
			<el-table-column prop="margin" label="保证金余额" />
			<el-table-column prop="use" label="可用下单余额" />
			<el-table-column align="center" label="操作">
				<template #default="scope">
					<div class="text-#114CEE cursor-pointer" >
						划转
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
const tableData = ref<any[]>([
	{
		icon:'/purchase/btc.svg',
		coin:'BTC',
		wallet:'0.000000',
		unrealized:'0.00000000',
		margin:'0.00000000',
		use:'0.00000000',
	},
	{
		icon:'/purchase/eth.svg',
		coin:'ETH',
		wallet:'0.000000',
		unrealized:'0.00000000',
		margin:'0.00000000',
		use:'0.00000000',
	},
	{
		icon:'/purchase/trx.svg',
		coin:'TRX',
		wallet:'0.000000',
		unrealized:'0.00000000',
		margin:'0.00000000',
		use:'0.00000000',
	},
	{
		icon:'/purchase/usdt.svg',
		coin:'USDT',
		wallet:'0.000000',
		unrealized:'0.00000000',
		margin:'0.00000000',
		use:'0.00000000',
	}
])

</script>
<style lang="scss" scoped>
.contract-table {
	--el-bg-color: #121212;
	color: #fff;
	font-size: 12px;
	--el-table-header-text-color: #fff;
	--el-table-row-hover-bg-color: #181A20;
	--el-table-border-color: #202020;
	--el-table-border: 4px solid #202020;

	// --el-table-border-color:none;
	::v-deep .el-table__empty-block {
		background-color: #121212;
		color: #fff;
	}

}
</style>

